CSS 媒体查询
阐述
让我们可以在不同的媒体上使用不同的 CSS。
宽度查询
编写媒体查询的方式主要有两种:
- 桌面端优先:先写桌面端样式,然后用媒 体查询在较小的视窗上应用其他样式
- 移动端优先:先写移动端样式,然后用媒体查询在较大的视窗上应用其他样式
- 如果需要自己设计,最好用移动端优先的方式开发
不管使用哪种方式,都应该保持 min-width
或 max-width
的一致性。
一般情况下,我们可以用 550 px, 1100 px, 1500 px 作为不同设备的断点。
交互查询
根据媒体能够交互的种类查询。
hover
: 媒体是否能悬停pointer
: 媒体是否能指针
实例
.signup-button {
color: deeppink;
font-size: 1rem;
}
@media (max-width: 400px) {
.signup-button {
font-size: 2rem;
}
}